import { createApp } from 'vue'
import App from './App.vue'
import "default-passive-events"
import './style.css'
import "./mock/index.js"
import router from "./router/index.js"

const app = createApp(App)

app.use(router)

/**自定义指令：在节点进入可视区域后添加类
 * @param {number} threshold 指定与边界盒交叉区域的比例值，取值 0 - 1
 * @param {string} class 指定需要添加的类名,多个类名时可用 ”:“ 接在后面
 * @example
 * <div v-inter:class="threshold"></div>*/
app.directive("inter",{
    mounted(el,binding){
        //获取所有类名组成的数组
        const classList = binding?.arg?.split(":") || []

        const intersectionObserver = new IntersectionObserver(entries=>{
            //如果目标在可视区域外，则不做任何事
            if(entries[0].intersectionRatio <= 0) return
            //目标进入视野
            classList.forEach(item=>{
                el.classList.add(item)
            })
            //触发后关闭监听
            intersectionObserver.disconnect()
        },{
            //设置触发回调时目标与边界盒交叉区域的比例值
            threshold: binding.value || 0
        })
        //监听指令所绑定的元素
        intersectionObserver.observe(el)
    }
})

app.mount('#app')


